<template>
  <div>
 
    <shopHeader  :pageType = pageTwo></shopHeader>
    <!-- 综合评分 -->
    <div class="comment" >
      <div class="comleft">
        <div class="cscore">{{seller.score}}</div>
        <div class="tomark">综合评分</div>
        <div class="comdetail">高于周边商家{{seller.rankRate}}%</div>
      </div>
      <div class="comright">
        <div class="sermanner">
          <div class="comitem">服务态度</div>
          <div class="comstar">
            <img src="/images/star36_on@2x.png" class="gstar1" />
            <img src="/images/star36_on@2x.png" class="gstar1" />
            <img src="/images/star36_on@2x.png" class="gstar1" />
            <img src="/images/star36_on@2x.png" class="gstar1" />
            <img src="/images/star36_off@2x.png" />
          </div>
          <div class="commark">{{seller.serviceScore}}</div>
        </div>
        <div class="sermanner">
          <div class="comitem">商品评分</div>
          <div class="comstar">
            <img src="/images/star36_on@2x.png" class="gstar1" />
            <img src="/images/star36_on@2x.png" class="gstar1" />
            <img src="/images/star36_on@2x.png" class="gstar1" />
            <img src="/images/star36_on@2x.png" class="gstar1" />
            <img src="/images/star36_off@2x.png" />
          </div>
          <div class="commark">4.0</div>
        </div>
        <div class="sermanner">
          <div class="comitem">送达时间</div>
          <div class="commark time">{{seller.deliveryTime}}分钟</div>
        </div>
      </div>
    </div>

    <div class="cline"></div>

    <div class="comcontent">
      <div class="contclass">
        <div class="classbtn btn1" @click="select('all')">全部{{seller.ratingCount}}</div>
        <div class="classbtn btn2" @click="select('like')">满意{{goodCount}}</div>
        <div class="classbtn btn3" @click="select('hate')">不满意{{hateCount}}</div>
      </div>
      <div class="choice">
        <span class="layout-check_circle"></span>
        只看有内容的评价
      </div>
    </div>
    <div class="list">
      <ul class="details">
        <li class="item" v-for="(rat,index) in ratings" :key="index">
          <div class="avatar" :style="{'background-image':'url('+ rat.avatar+')'}"></div>
          <div class="content">
            <div class="nameAndTime">
              <div class="name">{{rat.username}}</div>
              <div class="time">{{time(rat.rateTime)}}</div>
            </div>
            <div class="starAndtrans">
              <ul class="starList">
                <li class="starItem"></li>
                <li class="starItem"></li>
                <li class="starItem"></li>
                <li class="starItem"></li>
                <li class="starItem"></li>
              </ul>
              <div class="trans" v-if="rat.deliveryTime">{{rat.deliveryTime}}分钟到达</div>
            </div>
            <div class="desc">
              {{rat.text}}
            </div>
            <div class="goods">
              <div class="isLike" :class="rateTypeClass(rat.rateType)"></div>
              <ul class="goodsList">
                  <li class="goodsItem" v-for="(recom,index) in rat.recommend" :key="index">
                  {{recom}}</li>
              </ul>
            </div>
          </div>
        </li>
        
      </ul>
    </div>

    <shopCart></shopCart>
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex';
import moment from 'moment';
export default {
  name: "comment",
  data() {
      return {
          pageTwo : 2,
          ratings:[],
          rateType:2,
          needText:false,
      }
  },
  computed:{
    ...mapState(["seller"]),
    // 控制好评 还是差评
    rateTypeClass(){
      return function(type){
        if(type === 0)
          return 'layout-thumb_up'
        if(type === 1)
          return 'layout-thumb_down'
      }
    },
     // 满意数量
    goodCount(){
        return this.ratings.filter(rating => rating.rateType === 0).length;
    },
    hateCount(){
        return this.ratings.filter(rating => rating.rateType === 1).length;
    }
    
  },
  methods:{
    ...mapActions(['getRatings']),
    time(val){
      return moment(val).format("YYYY-MM-DD HH:mm:ss")
    },
    select(type){
      if(type === 'all')
        this.rateType = 2
      if(type === 'like')
        this.rateType = 0
      if(type === 'hate')
        this.rateType = 1
    },
    goodList(){
      return this.ratings.filter(rating => rating.rateType === 0)
    },
    hateList(){
      return this.ratings.filter(rating => rating.rateType === 1)
    }
  },
  async mounted(){
    const data =await this.getRatings();
    this.ratings = data;
  }
};
</script>

<style scoped>
.comment {
  display: flex;
  padding: 36rem 0;
  background-color: #fff;
}
.comment .comleft {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 275rem;
  border-right: 1px solid rgb(7, 17, 27, 0.1);
}
.comleft .cscore {
  font-size: 48rem;
  color: rgb(255, 153, 0);
  line-height: 56rem;
  margin-bottom: 12rem;
}
.comleft .tomark {
  font-size: 24rem;
  color: #07111b;
  line-height: 24rem;
}
.comleft .comdetail {
  font-size: 20rem;
  color: #a4a9ae;
  line-height: 20rem;
  margin-bottom: 12rem;
  margin-top: 16rem;
}
.comment .comright {
  width: 474rem;
  padding: 0 48rem;
}
.comright .sermanner {
  display: flex;
  margin-bottom: 16rem;
}
.sermanner .comitem {
  font-size: 24rem;
  color: #07111b;
  line-height: 36rem;
  margin-right: 24rem;
}
.comstar img {
  width: 30rem;
  height: 30rem;
  padding: 0 7rem;
}
.sermanner .commark {
  font-size: 24rem;
  color: rgb(255, 153, 0);
  line-height: 36rem;
  margin-left: 24rem;
}
.sermanner .commark.time {
  font-size: 24rem;
  color: rgb(147, 153, 159);
  line-height: 36rem;
}
.cline {
  width: 100%;
  height: 36rem;
  background-color: #f3f5f7;
  border-top: 1px solid rgb(7, 17, 27, 0.1);
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
}
.comcontent {
  padding: 0 36rem;
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
}
.comcontent .contclass {
  display: flex;
  padding: 36rem 0;
  border-bottom: 1px solid rgb(7, 17, 27, 0.1);
}
.classbtn {
  width: 120rem;
  height: 65rem;
  font-size: 24rem;
  line-height: 65rem;
  text-align: center;
}
.btn1 {
  color: #fff;
  background-color: #00a0dc;
  margin-right: 20rem;
}
.btn2 {
  color: #4d555d;
  background-color: #ccecf8;
  margin-right: 20rem;
}
.btn3 {
  color: #acafb2;
  background-color: #e9ebec;
}
.choice {
  padding: 36rem 0;
  font-size: 24rem;
  color: rgb(147, 153, 159);
  line-height: 36rem;
}
      .list{
            width: 100%;
            background-color: #fff;
        }
        .list .details{
            padding: 0 36rem
        }
        .list .item{
            display: flex;
            border-bottom:  1rem solid #f2f2f3;
            padding: 36rem 0 ;
        }
        .list .item .avatar{
            margin-right: 24rem;
            width: 56rem;
            height: 56rem;
            border-radius:50%;
            /* background: url('/images/bg.jpg') no-repeat; */
            background-size: cover;
        }
        .list .item .content{
            flex: 1;
         }
        .list .item .content .nameAndTime{
            display: flex;
            justify-content: space-between;
            font-size: 20rem;
            line-height: 24rem;
        }
        .list .item .content .nameAndTime .name{
            color: rgb(7, 17, 27);
        }
        .list .item .content .nameAndTime .time{
            color: rgb(147, 153, 159);
            font-weight: 200;
        }
        .list .item .content .starAndtrans{
            margin-top:8rem;
            margin-bottom:12rem;
            display: flex;
        }
        .list .item .content .starAndtrans .starList{
             margin-right: 12rem;
             display: flex;
        }
        .list .item .content .starAndtrans .starList .starItem{
            margin-right: 12rem;
            width: 20rem;
            height: 20rem;
            background: url('/images/star36_on@2x.png') no-repeat;
            background-size: cover;
        }
        .list .item .content .starAndtrans .trans{
            font-size: 20rem;
            font-weight: 200;
            color: rgb(147,153,159);
            line-height: 24rem;
        }
        .list .item .content .desc{
            font-size: 24rem;
            color: rgb(7, 17, 27);
            line-height: 36rem;
        }
        .list .item .content .goods{
            display: flex;
            margin-top: 16rem;
        }
        .list .item .content .goods .isLike.layout-thumb_up{
            font-size: 24rem;
            color: rgb(0,160,220);
            margin-right: 16rem;
            align-items: center;
            text-align: center;
            height: 36rem;
            line-height: 36rem;
        }
        .list .item .content .goods .isLike .layout-thumb_up,
        .list .item .content .goods .isLike .layout-thumb_down{
            font-size: 24rem;
            margin-right: 16rem;
            align-items: center;
            text-align: center;
            height: 36rem;
            line-height: 36rem;
        }
        .list .item .content .goods .isLike .layout-thumb_up{
            color:red;
        }
        .list .item .content .goods .isLike .layout-thumb_down{
            color: rgb(183,187,191);
        }
        .list .item .content .goods .goodsList{
            display: flex;
            flex-wrap: wrap;
            /* width: 600rem; */
        }
        
        .list .item .content .goods .goodsList .goodsItem{
            
            width: 127rem;
            padding:0 12rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            font-size: 18rem;
            color: rgb(147,153,159);
            line-height: 32rem;
            border: 1px solid rgb(7, 17, 27,0.1);
            border-radius: 2rem;
            margin-right: 16rem;
            align-self: center;
        }
</style>